<template>
    <div class="container">
        <div class="opt-area-02">
          <div class="right-con" style="margin-bottom: 20px">
            <div class="input-frame" style="width: 300px">
              <DatePicker type="datetimerange" v-model="dateArr" placeholder="选择总数时间起止" style="width: 300px"></DatePicker>
            </div>
            <div class="input-frame" style="width: 300px">
              <DatePicker type="datetimerange" v-model="dateArr1" placeholder="选择每日新增时间起止" style="width: 300px"></DatePicker>
            </div>
            <div class="input-frame" style="width: 130px;margin-top: 8px;">
              <Checkbox v-model="single">是否去除离沈人员</Checkbox>
            </div>
            <div>
              <Button type="info" size="small" @click="deleteAllCity()" style="margin-top: 5px">一键清空</Button>
            </div>
          </div>
          <div class="right-con">
              <Row>
                <div v-for="(obj, index) in cityArr" v-bind:key="obj.province" style="height: 60px;width: 100%;">
                  <Col span="4">
                    <span>{{obj.province}}</span>
                  </Col>
                  <Col span="18">
                    <CheckboxGroup v-model="cityModel">
                      <Checkbox :label="item.name" v-for="item in obj.city" v-bind:key="item.code">
                        <span>{{item.name}}</span>
                      </Checkbox>
                    </CheckboxGroup>
                  </Col>
                  <Col span="2">
                    <Button type="success" size="small" @click="add(index)" style="margin-top: 5px;margin-right: 2px">添加</Button>
                    <Button type="info" size="small" @click="deleteCity(index)" style="margin-top: 5px">删除</Button>
                  </Col>
                </div>
              </Row>
            </div>
          <Button type="info" size="small" @click="selectlist(1)" v-if="loadFlag == true" style="margin-top: 5px">搜索</Button>
        </div>
    </div>
</template>

<script>
import { date0str, findAllCity, saveAllCityToSel, fineAllCityToSelList } from '@/api/yi-qing-fang-kong'
// import App from '@/App'
export default {
  name: 'add-citys',
  data () {
    return {
      inout_state: '', // 是否去除离沈人员
      single: '',
      cityModel: [],
      type: '',
      dateArr: [],
      dateArr1: [],
      cityArr: [],
      city_list: [],
      city: [],
      params: [],
      paramsObj: {},
      tempParams: [],
      loadFlag: false,
      startTime: '',
      endTime: '',
      tempModel: [],
      dayStartTime: '',
      dayEndTime: ''
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  watch: {
    $route: function (to, from) {
      this.type = to.query.type
      this.findSelectCityList()
    }
  },
  methods: {
    selectlist () {
      console.log(this.single)
      if (this.single === true) {
        this.inout_state = '1'
      } else if (this.single === false) {
        this.inout_state = ''
      }
      this.params = []
      this.cityModel = []
      this.tempModel = []
      if (this.type === 'pc') {
        this.startTime = date0str(this.dateArr[0])
        this.endTime = date0str(this.dateArr[1])
        this.dayStartTime = date0str(this.dateArr1[0])
        this.dayEndTime = date0str(this.dateArr1[1])
        this.paramsObj['type'] = 'PC'
      } else if (this.type === 'app') {
        this.startTime = date0str(this.dateArr[0])
        this.endTime = date0str(this.dateArr[1])
        this.dayStartTime = date0str(this.dateArr1[0])
        this.dayEndTime = date0str(this.dateArr1[1])
        this.paramsObj['type'] = 'APP'
      }
      // for (var a in this.city) {
      for (var i = 0; i < this.city.length; i++) {
        let obj = {}
        if ((this.city[i].province === '北京市' || this.city[i].province === '天津市' || this.city[i].province === '重庆市' || this.city[i].province === '上海市' || this.city[i].province === '台湾省' || this.city[i].province === '香港特别行政区' || this.city[i].province === '澳门特别行政区' || this.city[i].province === '国外') && this.city[i].city.length > 0) {
          obj['province'] = this.cityArr[i].province
          obj['city'] = []
          this.params.push(obj)
        } else if (this.city[i].city.length > 0) {
          obj['province'] = this.cityArr[i].province
          obj['city'] = this.city[i].city
          this.params.push(obj)
        }
      }
      this.paramsObj['allcity'] = this.params
      // this.paramsObj['allcity'] = []
      saveAllCityToSel(this.paramsObj).then(res => {
        if (res.data.errcode === 0) {
          if (res.data.data.isSave === true) {
            this.$router.push({
              path: '/yi-qing/city-app-data-list',
              query: {
                type: this.type,
                startTime: this.startTime,
                endTime: this.endTime,
                dayStartTime: this.dayStartTime,
                dayEndTime: this.dayEndTime,
                inout_state: this.inout_state
              }
            })
          }
        } else {
          this.$Notice.error({
            title: '插入城市子表失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    findAllCityList () {
      findAllCity({}).then(res => {
        if (res.data.errcode === 0) {
          this.city_list = res.data.data
          Object.keys(this.city_list)
          for (var a in this.city_list) {
            let obj = {}
            if (a === '北京市' || a === '天津市' || a === '重庆市' || a === '上海市' || a === '台湾省' || a === '香港特别行政区' || a === '澳门特别行政区' || a === '国外') {
              obj['province'] = a
              let temp = [{
                code: '',
                name: a + '全部'
              }]
              obj['city'] = temp
              this.cityArr.push(obj)
            } else {
              obj['province'] = a
              obj['city'] = this.city_list[a]
              this.cityArr.push(obj)
            }
          }
          this.loadFlag = true
          // 生成模型model
          for (var j = 0; j < this.cityArr.length; j++) {
            let obj = {
              province: this.cityArr[j].province,
              city: []
            }
            this.city[j] = obj
          }
          this.findSelectCityList()
        } else {
          this.$Notice.error({
            title: '获取全部省市数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    findSelectCityList () {
      this.cityModel = ''
      this.cityModel = []
      this.cityModel.length = 0
      let param = {}
      if (this.type === 'pc') {
        param = {
          type: 'PC'
        }
      } else if (this.type === 'app') {
        param = {
          type: 'APP'
        }
      }
      fineAllCityToSelList(param).then(res => {
        if (res.data.errcode === 0) {
          // console.log(eval('(' + res.data.data.cityList + ')'), '已选城市')
          // let array = eval('(' + res.data.data.cityList + ')')
          let array = JSON.parse(res.data.data.cityList)
          for (var m = 0; m < array.length; m++) {
            if (array[m].province === '北京市' || array[m].province === '天津市' || array[m].province === '重庆市' || array[m].province === '上海市' || array[m].province === '台湾省' || array[m].province === '香港特别行政区' || array[m].province === '澳门特别行政区' || array[m].province === '国外') {
              let str = array[m].province + '全部'
              this.cityModel.push(str)
            } else {
              for (var n = 0; n < array[m].city.length; n++) {
                this.cityModel.push(array[m].city[n])
              }
            }
          }
          this.tempModel = this.cityModel
          for (var i = 0; i < array.length; i++) {
            for (var j = 0; j < this.cityArr.length; j++) {
              if ((array[i].province === '北京市' || array[i].province === '天津市' || array[i].province === '重庆市' || array[i].province === '上海市' || array[i].province === '台湾省' || array[i].province === '香港特别行政区' || array[i].province === '澳门特别行政区' || array[i].province === '国外') && array[i].province === this.cityArr[j].province) {
                let obj = {
                  province: array[i].province,
                  city: [array[i].province + '全部']
                }
                this.city[j] = obj
                break
              }
              if (array[i].province === this.cityArr[j].province) {
                let obj = {
                  province: this.cityArr[j].province,
                  city: array[i].city
                }
                this.city[j] = obj
                break
              }
            }
          }
        } else {
          this.$Notice.error({
            title: '获取已选城市数据失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    add (index) {
      var newArr1 = []
      for (var p = 0; p < this.cityModel.length; p++) {
        if (this.exist(this.cityModel[p], this.tempModel)) {
          newArr1[newArr1.length] = this.cityModel[p]
        }
      }
      for (var i = 0; i < newArr1.length; i++) {
        this.city[index].city.push(newArr1[i])
      }
      this.tempModel = this.cityModel
      this.$Notice.success({
        title: '成功',
        desc: '添加成功'
      })
    },
    deleteCity (index) {
      let newArr = []
      newArr = this.getArrEqual(this.cityModel, this.city[index].city)
      this.city[index].city = newArr
      this.tempModel = this.cityModel
      this.$Notice.success({
        title: '成功',
        desc: '删除成功'
      })
    },
    exist (num, arr1) {
      for (var j = 0; j < arr1.length; j++) {
        if (num === arr1[j]) {
          return false
        }
      }
      return true
    },
    getArrEqual (arr1, arr2) {
      let newArr = []
      for (let i = 0; i < arr2.length; i++) {
        for (let j = 0; j < arr1.length; j++) {
          if (arr1[j] === arr2[i]) {
            newArr.push(arr1[j])
          }
        }
      }
      return newArr
    },
    deleteAllCity () {
      this.cityModel = []
      this.tempModel = []
      this.paramsObj['allcity'] = []
      // 生成模型model
      for (var j = 0; j < this.cityArr.length; j++) {
        let obj = {
          province: this.cityArr[j].province,
          city: []
        }
        this.city[j] = obj
      }
      console.log(this.paramsObj, '入参')
    }
  },
  mounted () {
    this.type = this.$route.query.type
    this.findAllCityList()
    // this.findSelectCityList()
    // setTimeout(() => {
    //  this.findAllCityList()
    // }, 500)
  }
}
</script>

<style scoped>
    .page_style {
        margin: 20px 5px;
    }

    .input-frame {
        width: 120px;
        margin-right: 10px;
    }

    .house-list > .group {
        background: white;
        padding: 10px;
        margin-top: 10px;
    }

    .house-list > .group > .item {
        border-bottom: 1px solid #f5f5f5;
        padding: 10px 0;
    }

    .house-list > .group > .item .top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
    }

    .house-list > .group > .item .title {
        font-size: 14px;
        color: #333333;
    }

    .house-list > .group > .item .address {
        font-size: 12px;
        color: gray;
        display: flex;
        align-items: center;
    }

    .house-list > .group > .item .detail {
        font-size: 12px;
        color: dodgerblue;
    }

    .opt-area-02 {
        display: flex;
        align-items: center;
        flex-direction: column;
        border: 1px solid #abdcff;
        background-color: #f0faff;
        padding: 8px 16px 8px 16px;
        border-radius: 4px;
        margin-bottom: 10px;
    }

    .opt-area-02 .right-con {
        width: 100%;
        margin-top: 5px;
        display: flex;
    }

    .opt-area-02 .left-con {
        font-size: 14px;
        width: 100%;
    }

    .opt-area-02 .left-con span {
        font-weight: bold;
    }

    .opt-area-02 .right-con input {
        width: 150px;
        margin-right: 10px;
    }

    .opt-area-02 .right-con .input-frame {
        width: 200px;
        margin-right: 10px;
    }

    .table-action-btn {
        margin-right: 3px;
    }

    .container >>> .ivu-btn-small {
        height: 24px;
        padding: 0 5px;
        font-size: 12px;
        border-radius: 3px;
    }

    .btn-action {
        margin-bottom: 10px;
    }

    .mp10 {
        margin-right: 10px;
    }
    .title-style {
      color: red;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .ivu-table-row {
      height: 57px;
    }
    .demo-spin-icon-load{
      animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
      from { transform: rotate(0deg);}
      50%  { transform: rotate(180deg);}
      to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
      height: 100px;
      position: relative;
      /*border: 1px solid #eee;*/
    }
</style>
